<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14-jQuery内容选择器</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background: red;
            margin-top: 5px;
        }
    </style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function() {
            // 编写jQuery相关代码

            // :empty 作用：找到既没有文本内容也没有子元素的指定元素
            // var $div = $("div:empty"); // 找到没有文本，没有子元素的所有的div标签
            // console.log($div);

            // :parent 作用：找到有文本内容或有子元素的指定元素
            // var $div = $("div:parent");
            // console.log($div);

            // :contains(text) 作用：找到包含指定文本内容的指定元素
            // var $div = $("div:contains('我是div')");
            // console.log($div);

            // :has(selector) 作用：找到包含指定子元素的指定元素
            var $div = $("div:has('span')");
            console.log($div);
        });
    </script>
</head>
<body>
    <div></div>
    <div>我是div</div>
    <div>我是div123</div>
    <div><span></span></div>
    <div><p></p></div>
</body>
</html>